<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 24px; font-weight: bold">{{ task.inspectiontaskName }}</span>
      </div>
      <div>
        <el-row>
          <el-form label-width="120px">
            <el-col :span="12" style="line-height: 30px">
              <p><el-form-item label="巡检班组:">{{ task.inspectiontaskClass }} </el-form-item></p>
              <p>
                <el-form-item label="巡检人:">{{ task.inspectiontaskPerson }}
                </el-form-item>
              </p>
            </el-col>
            <div class="completion-badge">{{ task.inspectiontaskPerson }}</div>
          </el-form>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-tabs v-model="tab" >
            <el-tab-pane label="任务信息" name="任务信息"></el-tab-pane>
            <el-tab-pane label="巡检明细" name="巡检明细" @tab-click="handleClick"></el-tab-pane>
            <el-tab-pane label="巡检路线" name="巡检路线"></el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-card>
    <span v-if="tab == '任务信息'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>

        <el-form label-width="250px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务编号:">{{ task.code }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务名称:">{{ task.inspectiontaskName }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划类型:">{{ task.inspectiontaskDaytypeId }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务计划序号:">{{ task.inspectiontaskNumber }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划开始时间:">{{ task.inspectiontaskOntime }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划结束时间:">{{ task.inspectiontaskUntime }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card" style="margin-bottom: 100px">
        <div slot="header" class="clearfix">
          <span>巡检时间</span>
        </div>

        <el-form label-width="250px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间:">{{ task.inspectiontaskOkontime }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间:">{{ task.inspectiontaskOkuntime }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="点检用时:">{{ task.inspectiontaskTime }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </span>
    <span v-if="tab == '巡检明细'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>巡检明细</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="detail" style="width: 100%" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="index" label="序号" width="55" fixed>
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="code" label="设备编号" width="100"></el-table-column>
            <el-table-column prop="equipment.name" label="设备名称" width="100"></el-table-column>
            <el-table-column prop="equipment.specifications" label="规格型号" width="180"></el-table-column>
            <el-table-column prop="equipment.deviceType" label="设备类型" width="140"></el-table-column>
            <el-table-column prop="equipment.useDepartments" label="使用部门" width="100"></el-table-column>
            <el-table-column prop="equipment.storageLocation" label="存放位置" width="300"></el-table-column>
            <el-table-column prop="deviceInspectiontask.updateTime" label="执行时间" width="80"></el-table-column>
            <el-table-column prop="deviceInspectionproject.inspectionprojectName" label="巡检项目名称"
              width="80"></el-table-column>
            <el-table-column prop="deviceInspectionproject.inspectionprojectTypeId" label="巡检分类"
              width="80"></el-table-column>
            <el-table-column prop="deviceInspectionproject.inspectionprojectContent" label="巡检内容"
              width="80"></el-table-column>
            <el-table-column prop="isJudge" label="巡检结果" width="80"></el-table-column>
            <el-table-column prop="state" label="是否正常" width="80">
              <template slot-scope="scope">
                <el-span v-if="scope.row.state === 1">正常</el-span>
                <el-span v-else>异常</el-span>
              </template>
            </el-table-column>
            <el-table-column prop="deviceInspectiontask.cause" label="跳过原因" width="80"></el-table-column>
            <el-table-column prop="result" label="操作" width="80"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <span v-if="tab == '巡检路线'">
      <el-card class="box-card" style="margin-bottom: 10%">
        <div slot="header" class="clearfix">
          <span>巡检明细</span>
        </div>
        <div>
          <el-button type="primary" style="margin-bottom: 10px">导出</el-button>
          <el-table :data="detail" style="width: 100%" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="index" label="序号" width="55" fixed>
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="code" label="设备编号" width="100"></el-table-column>
            <el-table-column prop="equipment.name" label="设备名称" width="100"></el-table-column>
            <el-table-column prop="equipment.specifications" label="规格型号" width="180"></el-table-column>
            <el-table-column prop="equipment.deviceType" label="设备类型" width="140"></el-table-column>
            <el-table-column prop="equipment.useDepartments" label="使用部门" width="100"></el-table-column>
            <el-table-column prop="equipment.storageLocation" label="存放位置" width="300"></el-table-column>
            <el-table-column prop="deviceInspectiontask.updateTime" label="执行时间" width="80"></el-table-column>
            <el-table-column prop="count" label="巡检项目" width="80"></el-table-column>
            <el-table-column prop="deviceInspectiontask.inspectiontaskInspection" label="已检"
              width="80"></el-table-column>
            <el-table-column prop="deviceInspectiontask.inspectiontaskFn
" label="未检" width="80"></el-table-column>
            <el-table-column prop="deviceInspectiontask.inspectiontaskExceptional" label="异常"
              width="80"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </span>
    <el-card class="position">
      <el-row :gutter="20">
        <el-col :offset="9" :span="6" style="text-align: ">
          <el-button @click="closeForm()">关闭</el-button>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
import { getDetail } from '@/api/inspection/inspectionTask';
export default {
  data() {
    return {
      tab: "任务信息",
      task: {},
      detail: {},
      code:""
    }
  },
  methods: {
    init() {
      getDetail(this.code).then((result) => {
        console.log("result", result.data);
        this.detail = result.data;
      }).catch((err) => {

      });
    },
    handleClick(){
      console.log("tab", this.code);
      this.init();
    },
    closeForm() {

    },
  }, mounted() {
    this.code = this.$route.query.code;
    this.task = this.$route.query;
    console.log("task", this.task);
    this.init();
  }
};
</script>

<style scoped>
.wei-container {
  width: 1376px;
  /* margin-top: 20px; */
  margin-left: 20px;
}

.el-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.position {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  z-index: 1;
}

.box-card {
  margin: 20px 20px 40px 40px;
  width: 1250px;
  /* 设置固定宽度 */
  max-width: 100%;
  /* 防止过大 */
}

.close-card {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  /* margin-top: 20%; */
  text-align: center;
  z-index: 1;
}

.clearfix:after {
  font-weight: bold;
}

.completion-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  /* 设置宽度 */
  height: 100px;
  /* 设置高度 */
  border-radius: 50%;
  /* 圆形 */
  border: 3px dashed #28a745;
  /* 虚线边框 */
  color: #28a745;
  /* 字体颜色 */
  font-size: 18px;
  /* 字体大小 */
  font-weight: bold;
  /* 字体加粗 */
}
</style>